<html>
    <head>
        <meta charset="UTF-8" />
        <title>tm.form-observer.js Test</title>
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
                line-height: 1.5em;
            }
            
            body {
                font-size: 16px;
            }
        </style>
        <script src="tm.form-observer.js"></script>
        <script>
            
            HTMLDocument.prototype.$query = HTMLElement.prototype.$query = function(query, index) {
                return (index) ?
                    this.querySelectorAll(query)[index] : 
                    this.querySelector(query);
            };
            
            window.onload = function()
            {
                // tm-form-observer class 要素をすべて監視
                tm.FormObserver.observeAll();
                
                testFormObserver(document.$query("#textarea-test"));
                testFormObserver(document.$query("#input-text-test"));
                testFormObserver(document.$query("#input-number-test"));
            };
            
            var testFormObserver = function(parent)
            {
                var eTarget = parent.$query(".target");
                var eResult = parent.$query(".result");
                //tm.FormObserver.observe(eTarget);
                eTarget.addEventListener("change", function(){
                    eResult.value = eTarget.value;
                }, false);
            };
        </script>
    </head>
    <body>
        <header>
            <h1>tm.form-observer.js Test</h1>
            <p>
                テストプログラム
            </p>
        </header>
        <div>
            <section id="input-text-test">
                <h2>input[type="text"] Test</h2>
                <input type="text" class="target tm-form-observer" />
                <input type="text" class="result" />
            </section>
            <section id="input-number-test">
                <h2>input[type="number"] Test</h2>
                <input type="number" class="target tm-form-observer" />
                <input type="number" class="result" />
            </section>
            <section id="textarea-test">
                <h2>TextArea Test</h2>
                <textarea class="target tm-form-observer"></textarea>
                <textarea class="result"></textarea>
            </section>
        </div>
    </body>
</html>






